<template>
  <div class="add">
    <a-button type="primary" @click="addHandle">新增分类</a-button>
  </div>
  <a-table :columns="columns" :data-source="cateData">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          名字
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>

      <template v-else-if="column.key === 'action'">
        <span @click="removeCateHandle(record._id)">
          <a>删除</a>
        </span>
        |
        <span @click="updateCate(record)">
          <a>更改</a>
        </span>
      </template>
    </template>
  </a-table>

  <!--    -->
  <a-modal v-model:visible="visible" :title="modalTitle" @ok="confirmAdd">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
    >
      <a-form-item
        label="name"
        name="name"
        :rules="[{ required: true, message: '请填写分类名' }]"
      >
        <a-input v-model:value="formState.name" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { SmileOutlined } from '@ant-design/icons-vue'
import usegetList from './getList'
import { ref } from 'vue'
import useAddCate, { visible, showModal, formState } from './addCate'
import removeCate from './removeCate'

let modalTitle = ref('新增数据')
let isUpdate = ref(false)

function addHandle() {
  showModal()
  isUpdate.value = false
}

let { cateData, columns, getCateList } = usegetList() //  查

let { handleOk } = useAddCate() // 增
function confirmAdd() {
  handleOk(isUpdate, formState, getCateList) //  新增操作
  isUpdate.value = false
}

//  删除

function removeCateHandle(cate_id: string) {
  removeCate(cate_id, getCateList)
}

//  改

function updateCate(item: {
  _id: string
  name: string
  sort: number
  status: number
}) {
  modalTitle.value = '编辑分类'
  isUpdate.value = true
  showModal()

  let { name, _id } = item
  formState.name = name
  formState.id = _id
}
</script>
